<template>
  <div class="pic p20">
    <div class="condition re">
      <div class="ab" style="padding: 30px;">设备状态报表</div>
      <!--
      <div class="select-div ml10">
        <div class="select-div">车间：</div>
        <div class="select-div">
          <el-select v-model="searchData1.workshop" size="mini">
            <el-option v-for="(item,workshopIndex1) in planWorkshop" :key="workshopIndex1" :label="item" :value="workshopIndex1" />
          </el-select>
        </div>
      </div>
      <div class="select-div ml10">
        <el-button type="primary" size="mini" @click="searchHandle">搜索</el-button>
      </div>
      -->
    </div>
    <div id="asset-charts" :style="chartsHeight">
      <div class="first-asset" style="">
        <el-row :gutter="10">
          <el-col>
            <div id="echarts" style="width: 600px; height: 500px; margin: 0 auto;" />
          </el-col>
        </el-row>
      </div>
      <el-row :gutter="10" style="border: 10px solid #dfe4ed; border-radius: 15px;">
        <el-col :span="6">
          <div class="charts-workshop">
            <div class="workshop-title">冲压车间</div>
            <div id="echarts1" class="workshop-charts" style="" />
          </div>
        </el-col>
        <el-col :span="6">
          <div class="charts-workshop">
            <div class="workshop-title">车身车间</div>
            <div id="echarts2" class="workshop-charts" style="" />
          </div>
        </el-col>
        <el-col :span="6">
          <div class="charts-workshop">
            <div class="workshop-title">涂装车间</div>
            <div id="echarts3" class="workshop-charts" style="" />
          </div>
        </el-col>
        <el-col :span="6">
          <div class="charts-workshop">
            <div class="workshop-title">总装车间</div>
            <div id="echarts4" class="workshop-charts" style="" />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import API from '@/api/charts/charts'
import { planWorkshop } from '@/utils/options'
import * as echarts from 'echarts'
export default {
  data() {
    return {
      activeName: 'first',
      data1: [
        { value: 1, name: '在用' },
        { value: 1, name: '停用' },
        { value: 1, name: '闲置' },
        { value: 1, name: '待报废' },
        { value: 1, name: '维修中' }
      ],
      searchData1: {},
      planWorkshop,
      chartsHeight: null
    }
  },
  computed: {
    chartsHeights() {
      return window.innerHeight - 50 + 'px'
    }
  },
  mounted() {
    this.chartsHeight = { 'height': this.chartsHeights }
    const myChart = echarts.init(document.getElementById('echarts'))
    const myChart1 = echarts.init(document.getElementById('echarts1'))
    const myChart2 = echarts.init(document.getElementById('echarts2'))
    const myChart3 = echarts.init(document.getElementById('echarts3'))
    const myChart4 = echarts.init(document.getElementById('echarts4'))
    this.index()
    /* ECharts图表 */
    window.onresize = function() {
      myChart.resize()
      myChart1.resize()
      myChart2.resize()
      myChart3.resize()
      myChart4.resize()
    }
  },
  methods: {
    index() {
      const myChart = echarts.init(document.getElementById('echarts'))
      const myChart1 = echarts.init(document.getElementById('echarts1'))
      const myChart2 = echarts.init(document.getElementById('echarts2'))
      const myChart3 = echarts.init(document.getElementById('echarts3'))
      const myChart4 = echarts.init(document.getElementById('echarts4'))
      API.assetStatusPercent().then(res => {
        const option = {
          tooltip: {
            trigger: 'item',
            extStyle: {
              fontSize: 14
            },
            formatter(e) {
              const item = e.data
              return `<span class="echarts-span">${item.name}：${item.value}台<br>${item.percent}%</span>`
            }
          },
          legend: {
            bottom: '20'
          },
          series: {
            type: 'pie',
            radius: ['30%', '50%'],
            top: '0%',
            height: '100%',
            left: 'center',
            width: 600,
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            label: {
              alignTo: 'edge',
              // formatter: '{value|{b}}\n{value|{c} 小时}',
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 30,
              rich: {
                time: {
                  fontSize: 20,
                  color: '#999'
                }
              },
              fontSize: 20
            },
            labelLine: {
              length: 10,
              length2: 60,
              maxSurfaceAngle: 80
            },
            labelLayout: function(params) {
              const isLeft = params.labelRect.x < myChart.getWidth() / 0.1
              const points = params.labelLinePoints
              // Update the end point.
              points[2][0] = isLeft
                ? params.labelRect.x
                : params.labelRect.x + params.labelRect.width
              return {
                labelLinePoints: points
              }
            },
            data: res.data.percent
          },
          color: res.data.color
          // right: '50%'
        }
        option && myChart.setOption(option)
      })
      API.assetStatusPercent({ workshop: 0 }).then(res => {
        myChart1.setOption({
          graphic: {
            type: 'text',
            left: 'center',
            top: '35%',
            style: {
              text: res.data.totals,
              fill: '#333',
              fontSize: 20,
              fontWeight: 700
            }
          },
          tooltip: {
            trigger: 'item',
            textStyle: {
              fontSize: 14
            },
            formatter(e) {
              const item = e.data
              return `<span class="echarts-span">${item.name}：${item.value}台<br>${item.percent}%</span>`
            }
          },
          legend: [
            {
              data: ['在用', '闲置', '待报废'],
              bottom: '50px'
            },
            {
              data: ['维修中', '停用'],
              bottom: '20px'
            }
          ],
          series: [
            {
              type: 'pie',
              selectedOffset: 100,
              radius: ['50%', '70%'],
              center: ['50%', '40%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: false,
                  fontSize: '40',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: res.data.percent
            }
          ],
          color: res.data.color
          // right: '50%'
        })
      })
      API.assetStatusPercent({ workshop: 1 }).then(res => {
        myChart2.setOption({
          graphic: {
            type: 'text',
            left: 'center',
            top: '35%',
            style: {
              text: res.data.totals,
              fill: '#333',
              fontSize: 20,
              fontWeight: 700
            }
          },
          tooltip: {
            trigger: 'item',
            textStyle: {
              fontSize: 14
            },
            formatter(e) {
              const item = e.data
              return `<span class="echarts-span">${item.name}：${item.value}台<br>${item.percent}%</span>`
            }
          },
          legend: [
            {
              data: ['在用', '闲置', '待报废'],
              bottom: '50px'
            },
            {
              data: ['维修中', '停用'],
              bottom: '20px'
            }
          ],
          series: [
            {
              type: 'pie',
              selectedOffset: 100,
              radius: ['50%', '70%'],
              center: ['50%', '40%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: false,
                  fontSize: '40',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: res.data.percent
            }
          ],
          color: res.data.color
          // right: '50%'
        })
      })
      API.assetStatusPercent({ workshop: 2 }).then(res => {
        myChart3.setOption({
          graphic: {
            type: 'text',
            left: 'center',
            top: '35%',
            style: {
              text: res.data.totals,
              fill: '#333',
              fontSize: 20,
              fontWeight: 700
            }
          },
          tooltip: {
            trigger: 'item',
            textStyle: {
              fontSize: 14
            },
            formatter(e) {
              const item = e.data
              return `<span class="echarts-span">${item.name}：${item.value}台<br>${item.percent}%</span>`
            }
          },
          legend: [
            {
              data: ['在用', '闲置', '待报废'],
              bottom: '50px'
            },
            {
              data: ['维修中', '停用'],
              bottom: '20px'
            }
          ],
          series: [
            {
              type: 'pie',
              selectedOffset: 100,
              radius: ['50%', '70%'],
              center: ['50%', '40%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: false,
                  fontSize: '40',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: res.data.percent
            }
          ],
          color: res.data.color
          // right: '50%'
        })
      })
      API.assetStatusPercent({ workshop: 3 }).then(res => {
        myChart4.setOption({
          graphic: {
            type: 'text',
            left: 'center',
            top: '35%',
            style: {
              text: res.data.totals,
              fill: '#333',
              fontSize: 20,
              fontWeight: 700
            }
          },
          tooltip: {
            trigger: 'item',
            textStyle: {
              fontSize: 14
            }
          },
          legend: [
            {
              data: ['在用', '闲置', '待报废'],
              bottom: '50px'
            },
            {
              data: ['维修中', '停用'],
              bottom: '20px'
            }
          ],
          series: [
            {
              type: 'pie',
              selectedOffset: 100,
              radius: ['50%', '70%'],
              center: ['50%', '40%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: false,
                  fontSize: '40',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: res.data.percent
            }
          ],
          color: res.data.color
          // right: '50%'
        })
      })
    },
    searchHandle() {
      this.index()
    }
  }
}
</script>

<style scoped>
.p20{
  padding: 0 20px;
}
.re{
  position: relative;
}
.ab{
  position: absolute;
 }
.pic .condition{
  text-align: center;
}
/*
.condition .select-div{
  display: inline-block;
}
*/
#asset-charts{
  background-color: #dfe4ed; overflow: hidden;
}
.first-asset{
  background-color: #fff;
  box-sizing: border-box;
  border: 10px solid #dfe4ed;
  border-bottom: 0;
  border-radius: 15px;
}
.charts-workshop{
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 15px;
}
.charts-workshop .workshop-charts{
  width: 90%;
  height: 330px;
  margin: 0 auto;
}
.charts-workshop .workshop-title{
  padding:10px 0 0 10px;
}
.echarts-span{
  font-size: 20px;
}
</style>
